<!-- 经营数据 -->
<template>
  <div class="margin-bottom-20">
    <div class="flex justify-between padding-top-20 padding-bottom-10">
      <div class="font-size-18 font-weight-700">{{ m_dayjs(this.m_Date).format('YYYY[年]MM[月]DD[日]') }}</div>
      <div style="width: 200px"><el-date-picker size="mini" v-model="m_Date" type="date" placeholder="选择日期"> </el-date-picker></div>
    </div>
    <div style="height: 310px; display: flex">
      <div class="bg-color-fffff flex padding-15 flex-1 margin-right-20">
        <div style="width: 50%">
          <div class="font-size-16 font-weight-600 margin-bottom-20">今日经营数据</div>
          <div v-for="(item, i) in m_List1" :key="i" style="width: 100%" class="flex align-centers justify-between cursor-pointer margin-bottom-10 padding-left-right-20 line-item">
            <div class="flex align-centers">
              <img :src="item.img" class="img" />
              <div class="padding-left-10 price-txt">{{ item.pirce }}</div>
              <div class="name-txt">{{ item.name }}</div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="bg-color-fffff" style="width: 50%; height: 280px">
          <Echartsmodel ref="EChartspie" Type="Pie" index="EChartspie" :Prop.sync="m_EChartspie"></Echartsmodel>
        </div>
      </div>
      <div style="display: flex">
        <div class="bg-color-fffff padding-15" style="width: 330px; margin-right: 20px">
          <div class="font-size-16 font-weight-600 margin-bottom-20">当前出租率</div>
          <div v-for="(item, i) in m_List2" :key="i" style="width: 100%" class="flex align-centers justify-between cursor-pointer margin-bottom-10 padding-left-right-20 line-item">
            <div class="flex align-centers">
              <img :src="item.img" class="img" />
              <div class="padding-left-10 price-txt">{{ item.pirce }}</div>
              <div class="name-txt">{{ item.name }}</div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="bg-color-fffff padding-15" style="width: 330px">
          <div class="font-size-16 font-weight-600 margin-bottom-20">年累计收缴率</div>
          <div v-for="(item, i) in m_List3" :key="i" style="width: 100%" class="flex align-centers justify-between cursor-pointer margin-bottom-10 padding-left-right-20 line-item">
            <div class="flex align-centers">
              <img :src="item.img" class="img" />
              <div class="padding-left-10 price-txt">{{ item.pirce }}</div>
              <div class="name-txt">{{ item.name }}</div>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import Echartsmodel from '@/common/components/Echartsmodel';
  export default {
    components: { Echartsmodel },
    data() {
      return {
        m_dayjs: dayjs,
        m_Date: new Date(),
        m_List1: [
          { name: '运营收入', pirce: '66,321,00', type: '', img: require('../assets/imgs/img1.png') },
          { name: '运营支出', pirce: '50,321,00', type: '', img: require('../assets/imgs/img2.png') },
          { name: '当前欠费', pirce: '10,321,00', type: '', img: require('../assets/imgs/img3.png') },
          { name: '重大事件', pirce: '1', type: '', img: require('../assets/imgs/img4.png') },
        ],
        m_List2: [
          { name: '空间资产', pirce: '75.65%', type: '', img: require('../assets/imgs/img5.png') },
          { name: '平面资产', pirce: '75.65%', type: '', img: require('../assets/imgs/img6.png') },
          { name: '其他资产', pirce: '75.65%', type: '', img: require('../assets/imgs/img7.png') },
        ],
        m_List3: [
          { name: '现金流口径', pirce: '75.65%', type: '', img: require('../assets/imgs/img8.png') },
          { name: '权责口径', pirce: '75.65%', type: '', img: require('../assets/imgs/img9.png') },
        ],
        m_EChartspie: null,
      };
    },

    mounted() {
      this.m_EChartspie = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: ({d}%)',
        },
        title: {
          text: '',
        },
        legend: {
          bottom:0,
          data: ['月收入完成进度', '月支出完成进度'],
        },
        series: [
          {
            type: 'pie',
            radius: ['45%', '55%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 25, name: '月支出完成进度',itemStyle:{
                color:"#8400FF"
              }},
              { value: 75, name: '未完成',itemStyle:{
                color:"#e3e1e1"
              }},
            ],
          },
          {
            type: 'pie',
            radius: ['60%', '70%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 25, name: '月收入完成进度',itemStyle:{
                color:"#F59A23"
              } },
              { value: 75, name: '未完成',itemStyle:{
                color:"#e3e1e1"
              } },
            ],
          },
        ],
      };
    },
    //方法集合
    methods: {},
  };
</script>
<style scoped lang="scss">
  ::v-deep .el-col {
    min-height: -webkit-fill-available;

    display: flex;
    align-items: center;
  }
  ::v-deep .el-row {
    font-size: 16px;
    height: 40px;
    background-color: rgb(245, 244, 244);
  }

  .line-item {
    width: 300px;
    height: 50px;
    line-height: 50px;
    background: #fbfbfb;
    .price-txt {
      width: 105px;
    }
    .name-txt {
      width: 140px;
    }
    .img {
      width: 15px;
      height: 15px;
    }
  }
</style>
